// 定义字体(rpx)单位
@for $i from 12 through 60 {
  .font#{$i} {
    font-size: $i + upx;
  }
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex#{$i} {
    display: flex;
    flex: $i;
  }
}

//灰色边框
@for $i from 1 through 10 {
  @each $short, $long in l left, t top, r right, b bottom {
    .border-#{$short}-#{$i} {
      border-#{$long}: $i + upx solid #f4f4f4;
    }
  }
}

//文本对齐方式
@each $short, $long in l left, t top, r right, b bottom {
  .t#{$short} {
    text-align: $long;
  }
}

//flex横向对齐方式
@each $short, $long in a space-around, b space-between, e space-evenly, r right {
  .justify-#{$short} {
    display: flex;
    justify-content: $long;
  }
}

// 定义内外边距
@for $i from 0 through 200 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：margin-30或者m-30
    .m-#{$i} {
      margin: $i + upx;
    }

    // 得出：padding-30或者p-30
    .p-#{$i} {
      padding: $i + upx;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： m-l-30
      // 定义外边距
      .m-#{$short}-#{$i} {
        margin-#{$long}: $i + upx !important;
      }

      // 定义内边距
      .p-#{$short}-#{$i} {
        padding-#{$long}: $i + upx !important;
      }
    }
  }
}

/* flex布局垂直居中 */
.flex-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.flex {
  display: flex;
}

/* 自适应高宽 */
.h100 {
  height: 100%;
}
.vh100 {
  height: 100vh;
}
.w100 {
  width: 100%;
}

/* 单行文字溢出省略 */
.overone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
/* 两行文字溢出省略 */
.overtwo {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

//flex垂直布局方式
@each $short, $long in a space-around, b space-between, e space-evenly {
  .flex-column-#{$short} {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: $long;
  }
}

.in-block {
  display: inline-block;
}
/* 定位 */
.relative {
  position: relative;
}

.bolder {
  font-weight: bolder;
}